{% extends "base.html" %}

<!-- =================================================================== -->
<!-- Page onload ======================================================= -->
<!-- =================================================================== -->
{% block BaseHead %}
<!-- Google maps -->
<script type="text/javascript" src="http://maps.google.com/maps?file=api&v=2&key=ABQIAAAAB1HE6c8mtUP2cfxsSezyExTLg_i57PFZfojJFM1YCHtnknrpaxQ3Npzhv2-Mx3iB7iHQIuBmtt7Wiw"></script>

<script type="text/javascript">
GW.pageOnLoad = function() {
    // create panel and make resizable
    GW.initPanels();
    GW.makeTT( 'idFilter', 'Apply filter to page list' );
    GW.makeTT( 'idNewPage', 'New GeoWiki Page' );
    GW.initPageTable();
    GW.newPage.init();
    GW.wait.hide();
    GW.console( 'list.html init' );
};
// Create panels
GW.initPanels = function(){
    GW.pFilter = GWP.newPanel( 'idFilterPanel', GWL.listExtra );
    GWP.resize( GW.pFilter );
    GW.pList = GWP.newPanel( 'idListPanel', GWP.config( GWL.listList ));
    GWP.resize( GW.pList );
    GW.pMap = GWP.newPanel( 'idMapPanel', GWP.config( GWL.listMap ));
    GWP.resize( GW.pMap );
    // put map in map panel
    if (GBrowserIsCompatible()) {
        GW.pMap._map = new GMap2(document.getElementById("idMapBD"));
        GW.pMap._map.addMapType(G_PHYSICAL_MAP);
        GW.pMap._map.setCenter(new GLatLng(GW.map.lat, GW.map.lon), GW.map.scale, G_PHYSICAL_MAP);
        GW.pMap._map.addControl(new GLargeMapControl());
        GW.pMap._map.addControl(new GMapTypeControl());
        GW.pMap._map.addControl(new GScaleControl());
        GW.pMap._map.addControl(new GOverviewMapControl ());
        GW.pMap._map.enableGoogleBar();
    }
};
// Run filter and refresh list panel
GW.filter = function(){
    alert( 'todo: filter not currently implemented' );
};
// Show the clicked page
GW.showPage = function(oArgs){
    var row = oArgs.target;
    var rcd = GW.dt.getRecord( row );                // args.target is the row #
    var data = rcd.getData( 'wikiTitle' );
    window.location = '/' + data ;
};
// Initialize the data table
GW.initPageTable = function(){
    // Setup data source
    GW.src = new YAHOO.util.XHRDataSource("/gw/json/pages");
    GW.src.responseType = YAHOO.util.DataSource.TYPE_JSON;
    GW.src.connXhrMode = "queueRequests";
    GW.src.responseSchema = { resultsList: "pages", 
                              fields: ['wikiTitle', 
                                "revision", 
                                'current', 
                                'locked', 
                                'title',
                                'content', 'author', 'nickname', 
                                'date', 'tags', 
                                'bboxEast', 'bboxWest', 'bboxSouth', 'bboxNorth'
                                ] };
    // Setup data table
    GW.col = [
        {key: "wikiTitle", sortable:true, label: 'GeoWiki Title', resizeable:true },
        {key: "title", sortable:true, label: 'Title', resizeable:true, minWidth:300 },
        {key: "nickname", sortable:true, label: 'Author', resizeable:true, minWidth:150 },
        {key: "date", sortable:true, label: 'Date', resizeable:true, minWidth:150 },
        {key: "tags", sortable:true, label: 'Tags', resizeable:true, minWidth:200 }
    ];
    GW.dt = new YAHOO.widget.DataTable( "idTable", GW.col, GW.src );
    // Enable row highlighting
    GW.dt.subscribe("rowMouseoverEvent", GW.dt.onEventHighlightRow);
    GW.dt.subscribe("rowMouseoutEvent", GW.dt.onEventUnhighlightRow);
    // Catch click event to show page
    GW.dt.subscribe("rowClickEvent", GW.showPage);
};
// Init new page dialog
GW.newPage.init = function(){
    // Create and render the dialog
    GW.newPageDialogConfig = {
        postmethod: "none",
        fixedcenter : true,
        visible : false, 
        hideaftersubmit: true,
        constraintoviewport: true,
        modal: true,
        buttons : [ { text:"Cancel", handler:GW.newPageCancel, isDefault:true },
                    { text:"Submit", handler:GW.newPageSubmit }]
    };
    GW.newPageDialog = new YAHOO.widget.Dialog("idNewPageDialog", GW.newPageDialogConfig );
    GW.newPageDialog.render(document.body);
};
// New page 
GW.newPage = function(){
    GW.newPageDialog.bringToTop();
    GW.newPageDialog.show();
};
// Cancel a new marker
GW.newPageCancel = function( click, dialog ){
    dialog.cancel();
};
// New page submit
GW.newPageSubmit = function( click, dialog ){
    var wikiTitle = dialog.form.wikiTitle.value;
    // make sure the name is legal
    window.location = "/gw/newpage/" + wikiTitle;
};

// wikiedit page unload.  GUnload to prevent memory leaks on page unload.
GW.pageOnUnload = function(){
    GUnload();
};
</script>
{% endblock %}

<!-- =================================================================== -->
<!-- Page body ========================================================= -->
<!-- =================================================================== -->
{% block BaseBody %}
<style type="text/css">
    .filterLabel { 
        display:block;
        float:left;
        width: 3em;
        padding-right: 0.5em;
        font-size: 80%;
        clear:left; 
        margin-bottom: 0.5em;
    }
    .filterInput {
        margin-bottom: 0.5em;
    }
    .fieldLabel { 
        display:block;
        float:left;
        width: 20em;
        padding-right: 0.5em;
        font-size: 80%;
        clear:left; 
        margin-bottom: 0.5em;
    }
    .fieldInput {
        margin-bottom: 0.5em;
    }
</style>

<!-- =================================================================== -->
<!-- Filter panel. Controls what pages are shown in list. ============== -->
<!-- =================================================================== -->
<div id="idFilterPanel" style="visibility:hidden" >
    <div class="hd">GeoWiki Page Filter</div>
    <div class="bd" style="overflow: auto">
        <table class="simple1">
        <tr class="simple1">
            <td class="simple1">
                <!--<img  id="idFilter" src="/static/img/filter.png" style="border-style: none; verticle-align: middle;" onClick="GW.filter();" />-->
                <img id="idNewPage" src="/static/img/newpage.png" style="border-style: none; verticle-align: middle;" onClick="GW.newPage();" />
            </td>
            <td class="simple1">
                <label for="map" class="filterLabel" >Map:</label>
                Yes <input class="filterInput" type="radio" name="map" value="true" checked="true" />
                No <input class="filterInput" type="radio" name="map" value="false" />
                <br />
                <label for="tags" class="filterLabel" >Tags:</label>
                <input class="filterInput" type="text" name="tag" size="60" value="" />
                <br />
            </td>
        </tr>
        </table>
    </div>
</div>

<!-- =================================================================== -->
<!-- List panel. Shows data table listing all pages that match filter. = -->
<!-- =================================================================== -->
<div id="idListPanel" style="visibility:hidden" >
    <div class="hd">GeoWiki Page List</div>
    <div class="bd" style="overflow: auto">
        <h3>Click on page to view.</h3>
        <div id='idTable'><!-- data table goes here --></div>
    </div>
</div>

<div id="idMapPanel" style="visibility:hidden" >
    <div class="hd">GeoWiki Map</div>
    <div id="idMapBD" class="bd" style="overflow: auto"><!-- map goes here --></div>
</div>

<!-- =================================================================== -->
<!-- New page dialog =================================================== -->
<!-- =================================================================== -->
<div id="idNewPageDialog" style="visibility:hidden" >
    <div class="hd">Please enter new page information</div>
    <div class="bd">
        <form id="idNewPageForm" method="post" enctype="multipart/form-data" action="/gw/json/markers" name="Form1">
            <div class="clear"></div>
            <label for="wikiTitle" class="fieldLabel" >GeoWiki page title, ex. My_Page.Something:<br /><b>Name must be unique and be a legal URI.</b>.</label>
            <input class="fieldInput" type="text" name="wikiTitle" value="" size="20" />
        </form>
    </div>
</div>
{% endblock %}



